<template>
  <div
    class="title-bar"
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 35px;
      margin-top: 35px;
    "
  >
    <img src="../assets/vue.svg" width="48" />
    <div class="title">ELEME_ADMIN</div>
  </div>
  <a-form
    style="max-width: 480px; margin: 0 auto"
    label-align="left"
    auto-label-width
    :model="form"
    @submit="handleSubmit"
  >

      <a-form-item field="userPhone" label="手机号"
                   :rules="[{ required: true, message: '请输入手机号' }, { minLength:4, match: /^\d{4,}$/, message: '手机号格式错误(四位数字以上)' }]">
          <a-input v-model="form.userPhone" placeholder="请输入手机号" />
      </a-form-item>
    <a-form-item
            field="password"
            tooltip="密码不少于 5 位"
            label="密码"
            :rules="[{ required: true, message: '密码不能为空' }, { minLength:5,  message: '密码至少需要五位任意字符' }]"
    >
      <a-input-password v-model="form.password" placeholder="请输入密码" />
    </a-form-item>
      <a-form-item field="userName" label="用户名"
                   :rules="[{ required: true, message: '用户名不能为空' }]">
          <a-input v-model="form.userName" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item
              field="file"
              label="头像"
              :rules="[{ required: true, message: '用户头像不能为空' }]"
      >
          <a-space direction="vertical" :style="{ width: '100%' }">
              <a-upload
                      action="/"
                      :fileList="form.file ? [form.file] : []"
                      :show-file-list="false"
                      @change="onChange"
                      @progress="onProgress"
              >
                  <template #upload-button>
                      <div
                              :class="`arco-upload-list-item${
            form.file && form.file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
                      >
                          <div
                                  class="arco-upload-list-picture custom-upload-avatar"
                                  v-if="form.file && form.file.url"
                          >
                              <img :src="form.file.url"/>
                              <div class="arco-upload-list-picture-mask">
                                  <IconEdit/>
                              </div>
                              <a-progress
                                      v-if="form.file.status === 'uploading' && form.file.percent < 100"
                                      :percent="form.file.percent"
                                      type="circle"
                                      size="mini"
                                      :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                              />
                          </div>
                          <div class="arco-upload-picture-card" v-else>
                              <div class="arco-upload-picture-card-text">
                                  <IconPlus/>
                                  <div style="margin-top: 10px; font-weight: 600">Upload</div>
                              </div>
                          </div>
                      </div>
                  </template>
              </a-upload>
          </a-space>
      </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" style="width: 120px"
        >注册
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";


import {UserLoginRequest, UserRegisterRequest} from "../type/user";
import {login, register} from "../service/user.ts";
import {userStore} from "../store/user.ts";
import router from "../router";
import {IconEdit} from "@arco-design/web-vue/es/icon";
import ACCESS_ENUM from "../access/accessEnum.ts";


const form = reactive({
    userPhone: "",
    password: "",
    userRole:ACCESS_ENUM.ADMIN,
    biz:"food_image",
} as UserRegisterRequest);



const onChange = (_, currentFile) => {
    form.file = {
        ...currentFile,
    };
};
const onProgress = (currentFile) => {
    form.file = currentFile;
};
//注册逻辑
const handleSubmit = async () => {
    form.file = form.file.file
    const formData =new FormData()
    //数据校验
    if(form.userPhone === "" || form.password === "" || form.file === undefined){
        alert("数据缺失")
        return ''
    }
    for (const key in form) {
        formData.append(key, form[key])
    }
    const res = await register(formData)
    if (res.data){
        await alert("注册成功，请前往登录")
        await router.push("/user/login")
    }else {
        alert("注册失败，错误："+res.message)
    }


};
</script>

<style scoped></style>
